<template>
  <div class="main">
    <search
      ref="mysearch"
      @doReset="doReset"
      @doQuery="doRefresh"
      :ruleform="ruleForm"
    >
      <template slot="top">
        <el-form-item label="系统名称：" prop="systemId">
          <el-select v-model="ruleForm.systemId" @change="selectSysChanged">
            <el-option value="" label="全部"></el-option>
            <el-option
              v-for="(item, index) in systemList"
              :key="index"
              :label="item.name"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环境名称：" prop="environmentId">
          <el-select v-model="ruleForm.environmentId" @change="selectEnvChanged">
            <el-option value="" label="全部"></el-option>
            <el-option
              v-for="(item, index) in envList"
              :key="index"
              :label="item.name"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务名称：" prop="serviceId">
          <el-select v-model="ruleForm.serviceId">
            <el-option value="" label="全部"></el-option>
            <el-option
              v-for="(item, index) in serverList"
              :key="index"
              :label="item.name"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用：" prop="enable">
          <el-select v-model="ruleForm.enable">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：" prop="startTime" class="dateTime">
          <el-date-picker
            v-model="ruleForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </template>
      <div slot="foot"></div>
    </search>
    <div class="table-warpper">
      <mytable ref="mytable" :config="tableconfig">
        <div slot="mytablebody">
          <el-button
            type="primary"
            size="small"
            style="margin-bottom:24px"
            @click="handleAdd"
            >添加</el-button
          >
        </div>
        <!-- 是否启用 -->
        <template v-slot:enable="{ data }">
          <p v-if="data.enable == 1">是</p>
          <p v-else class="fontcolor">否</p>
        </template>
        <!-- 操作 -->
        <template v-slot:operation="{ data }">
            <el-button type="text" @click="detail(data)">查看</el-button>
            <el-button type="text" @click="edit(data)">编辑</el-button>
            <el-button type="text" @click="del(data)">删除</el-button>
            <el-button type="text" @click="execute(data)">执行</el-button>
         
        </template>
      </mytable>
    </div>
    <AddTask
      ref="AddTask"
      :title="title"
      :type="type"
      @handleEvent="handleEvent"
    ></AddTask>
    <drawer
      ref="drawer"
      :data="selectItem"
      title="任务详情"
      :columns="columns"
    ></drawer>

    <DialogMessage
      :message="message"
      :isShowDialog="isShowDialog"
      @confirm="confirm"
    ></DialogMessage>
  </div>
</template>

<script>
import mytable from "@/components/table.vue";
import AddTask from "../components/AddTask.vue";
import drawer from "@/components/drawer.vue";
import search from "@/components/search.vue";
import DialogMessage from "@/components/DialogMessage.vue";
import { systemFind, environmentData,  } from "@/api/log";
import { changeParam } from "@/utils/helper";
import { serviceColumns, serviceTableconfig } from "../data/configData.js";
import { getServiceData } from "@/api/configuration/serviceApi";
import {
  serviceTaskList,
  TaskInfo,
  deleteTaskList,
  executeTask,
} from "@/api/serviceSurvive";
export default {
  components: {
    mytable,
    AddTask,
    drawer,
    search,
    DialogMessage,
  },
  data() {
    return {
      ruleForm: {
        systemId: "",
        serviceId: "",
        environmentId: "",
        startTime: "",
        endTime: "",
        enable: "",
        isMain:false,
        time: [],
        pageNo: 1,
        pageSize: 20,
      },
      isShowDialog: false,
      message: "删除这条记录？",
      dialogVisible: false,
      columns: serviceColumns,
      selectItem: "",
      title: "添加任务",
      type: 1,
      searchCondition: {
        alarmCellPhone: "",
        systemId: "",
        serviceId: "",
        startTime: "",
        endTime: "",
        time: [],
        pageNo: 1,
        pageSize: 20,
      },
      tableconfig: serviceTableconfig,
      serverList: [],
      envList: [],
      systemList: [],
      systemId:'',
    };
  },
  methods: {
    //级联关系
    selectSysChanged(){
      const { systemId } = this.ruleForm;
      console.log(this.systemId,'systemIdsystemId');
      this.getenvDataList(systemId);
      this.getserverDataList('',systemId);
      this.ruleForm.environmentId = "";
      this.ruleForm.serviceId = "";
    },
    selectEnvChanged() {
      const { environmentId } = this.ruleForm;
      const { systemId } = this.ruleForm;
      console.log(environmentId,systemId,'environmentId,systemId');
      this.ruleForm.serviceId = "";
      this.getserverDataList(environmentId,systemId);
    },
    // 重置搜索
    doReset() {
      console.log(Object.keys(this.ruleForm).slice(0, -2), "this.ruleForm");
      Object.keys(this.ruleForm)
        .slice(0, -4)
        .map((x) => {
          this.ruleForm[x] = "";
        });
      this.ruleForm.time = [];
      // this.$message({
      //   message: "已重置",
      //   type: "success",
      // });
      this.getserverDataList();
      this.getenvDataList();
      this.doRefresh();
    },
    // 刷新
    doRefresh() {
      //页码从第一页开始
      this.tableconfig.currentpage = 1;
      this.ruleForm.pageNo = 1;
      //表格回到顶部
      this.$refs.mytable.$emit("handleGoTop");
      this.doQuery();
    },
    handleAdd() {
      this.title = "添加任务";
      this.$refs.AddTask.open("1");
    },
    // 页码数更新
    handleSizeChange(val) {
      this.ruleForm.pageNo = 1;
      this.ruleForm.pageSize = val;
      this.doQuery();
      //表格回到顶部
      this.$refs.mytable.$emit("handleGoTop");
    },
    // 当前页码更新
    handleCurrentChange(val) {
      this.ruleForm.pageNo = val;
      console.log(this.ruleForm.pageNo, "this.tableconfig.currentpage");
      this.doQuery();
      //表格回到顶部
      this.$refs.mytable.$emit("handleGoTop");
    },
    handleEvent() {
      this.ruleForm.isMain = true;
      this.doQuery();
    },
    execute(data) {
      executeTask(data.id).then((res) => {
        if (res.result) {
          this.$message.success("此服务器已执行");
        } else {
          this.$message.error("此服务器无法执行");
        }
      });
    },
    detail(data) {
      this.selectItem = data;
      if (this.selectItem.enable == 1) {
        this.selectItem.enable = "是";
      } else {
        this.selectItem.enable = "否";
      }
      this.$refs.drawer.open(this.selectItem);
    },
    close() {},
    edit(data) {
      this.title = "编辑任务";
      TaskInfo(data.id).then((res) => {
        console.log(res, "bianj");
        if (res.success) {
          this.selectItem = res.result;
          this.$refs.AddTask.open(this.selectItem);
        }
      });
    },
    del(data) {
      this.isShowDialog = true;
      this.selectItem = data;
    },
    confirm(type) {
      if (type == 1) {
        deleteTaskList(this.selectItem.id).then((res) => {
          if (res.result) {
            this.$message.success(res.message);
            this.ruleForm.isMain = true;
            this.doRefresh();
          } else {
            this.$message.error(res.message);
          }
        });
      }
      this.isShowDialog = false;
    },
    async doQuery() {
      this.tableconfig.loading = true;
      this.tableconfig.currentpage = this.searchCondition.pageNo;
      this.tableconfig.pagesize = this.searchCondition.pageSize;
      this.ruleForm.startTime = this.ruleForm.time[0];
      this.ruleForm.endTime = this.ruleForm.time[1];
      let data1 = await serviceTaskList(this.ruleForm);
      console.log(data1);
      if (data1.success) {
        this.tableconfig.total = data1.result.total;
        this.tableconfig.tabledata = data1.result.list;
        this.ruleForm.isMain = false;
      }
      this.tableconfig.loading = false;
    },
    getDataList() {
      let params = {
        name: "",
        pageNo: 1,
        pageSize: 99999,
      };
      systemFind(changeParam({ ...params })).then((res) => {
        if (res.success) {
          this.systemList = res.result.list;
        }
      });
    },
    getenvDataList(systemId){
      let envParams = {
        systemId: systemId,
        systemName: "",
        name: "",
        pageNo: 1,
        pageSize: 99999,
      };
      environmentData(changeParam({ ...envParams })).then((res) => {
        if (res.success) {
          this.envList = res.result;
        }
      });
    },
    getserverDataList(environmentId,systemId){
      const params = { environmentId,systemId, pageNo: 1, pageSize: 9999 };
      getServiceData(changeParam({ ...params })).then((res) => {
        if (res.success) {
          this.serverList = res.result.list;
        }
      });
    },
  },
  created() {
    this.doQuery();
    this.getDataList();
    this.getserverDataList();
    this.getenvDataList();
  },
};
</script>
<style lang="scss" scoped>
  .el-button--primary{
    background-color: #3C77FF;
    border-color: #3C77FF;
  }
  .el-button--text{
    color: #3C77FF;
    font-weight: 400;
  }
  .operation{
    text-align: center;
  }
  .el-dialog__body ::v-deep .el-form-item__label:before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }
</style>
